<template>
  <div class="lynx-main" v-bind="$attrs">
    <div class="header">
      <b>${headerName}</b>
    </div>
    <div class="search">
      <TopCollapse title="'查询条件：'">
        <el-form :model="formSearch" ref="formSearchRef" label-width="80px">
          <BaseFormItems :form="formSearch" :items="searchFormItems" :exclude="exclude" ifIndex />
        </el-form>
      </TopCollapse>
    </div>
    <div class="tools">
      <div class="tools-left">
        <el-button v-p="buildPer(':add')" type="success" size="small" icon="plus" @click="openAdd">新增</el-button>
        <el-popconfirm v-if="base.idKey" width="220" icon-color="#626AEF" confirm-button-text="是" cancel-button-text="否"
          title="确定删除吗?" @confirm="doDeleteByIds()">
          <template #reference>
            <el-button v-p="buildPer(':del')" type="danger" size="small" icon="delete">删除选中</el-button>
          </template>
        </el-popconfirm>
<!--        <el-button v-p="buildPer(':down')" type="primary" size="small" icon="download"-->
<!--          @click="openDownExcel">导出</el-button>-->
      </div>
      <div class="tools-right">
        <el-button type="primary" size="small" @click="resetForm" icon="refresh">重置</el-button>
        <el-button v-p="buildPer(':search')" @click="doSearch" size="small" icon="search"
          :loading="loadingSearch">查询</el-button>
      </div>
    </div>
    <div class="content">
      <slot name="el-table">
        <el-table :data="page.list" class="el-table" ref="tableRef" @sortChange="sortChange">
          <el-table-column fixed type="selection" width="30" />
          <el-table-column fixed label="操作" width="140" align="center">
            <template #default="{ row }">
              <el-button v-p="buildPer(':upd')" link type="primary" size="small" @click="openUpdate(row)">编辑</el-button>
              <el-button link size="small" @click="openInfo(row)">详情</el-button>
              <el-popconfirm v-if="base.idKey" width="220" icon-color="#626AEF" confirm-button-text="是"
                cancel-button-text="否" title="确定删除吗?" @confirm="doDeleteByIds(row[base.idKey])">
                <template #reference>
                  <el-button v-p="buildPer(':del')" link type="danger" size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
          <BaseColumns :columns="tableColumns" />
        </el-table>
      </slot>
    </div>
    <div class="pagination">
      <BasePagination :page="page" @search="doSearch" />
    </div>
    <div class="footer">

    </div>
  </div>
  <el-dialog v-model="showAdd" title="新增" width="800">
    <Add @success="addSuccess" />
  </el-dialog>

  <el-dialog v-model="showUpdate" :title="'更新-' + idVal" width="800">
    <Update :idVal="idVal" @success="updateSuccess" />
  </el-dialog>

  <el-drawer v-model="showInfo" title="详情" size="700">
    <Info :idVal="idVal" />
  </el-drawer>

  <DownExcelDialog v-model="showDownExcel" :page="page" :params="formSearch" :uri="base.baseApi.page.uri"
    file-name="${headerName}.xlsx" />
</template>

<script lang="ts" setup>
import Add from './components/add.vue';
import Info from './components/info.vue';
import Update from './components/update.vue';
import TopCollapse from '@/components/my/TopCollapse.vue';
import BaseColumns from '@/components/base/baseColumns.vue';
import BaseFormItems from '@/components/base/baseFormItems.vue';
import BasePagination from '@/components/base/basePagination.vue';
import DownExcelDialog from '@/components/base/downExcelDialog.vue';

import { ElMessage } from 'element-plus';
import { RespType } from '@/axios/api';
import { ref, onMounted, reactive } from 'vue';
import { useIndexCustom } from '@/components/base/baseHook';
import { base, buildPer, ${dv}, searchFormItems, tableColumns } from './ts/main';

const exclude: Array<keyof ${dv}> = ['${idName}'];
const formSearch = reactive<${dv}>(new ${dv}());
const {
  idVal, showAdd, showUpdate, showInfo, showDownExcel, loadingSearch, tableRef, formSearchRef, page, search,
  deleteByIds, openInfo, openUpdate, openAdd, openDownExcel, addSuccess, updateSuccess, resetForm, sortChange
} = useIndexCustom(base, formSearch);

const doSearch = search.fun;
// search.after = (res: RespType) => { } // 查询后处理

const doDeleteByIds = deleteByIds.fun;
// deleteByIds.after = (res: RespType) => { } //删除后处理

onMounted(() => {
  doSearch();
})
</script>

<style lang="scss" scoped></style>